<template>
	<view class="center">
		<view class="logo" :hover-class="!islogin ? 'logo-hover' : ''">
			<image class="logo-img" src="noavatarUrl" v-if="!avatarUrl"></image>
			<view class="info-img" style="border-radius:50%; overflow: hidden;" v-else>
				<open-data type="userAvatarUrl" style="border-radius:50%;"></open-data>
			</view>
			<view class="logo-title">
				<text class="uer-name" >{{nickName ? nickName : '教育之弦'}}</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom" @click="tomeetingorder">
				<text class="list-icon">&#xe664;</text>
				<text class="list-text">我的会议报名</text>
				<text class="navigat-arrow">&#xe60a;</text>
			</view>
			<view class="center-list-item" @click="toketi">
				<text class="list-icon">&#xe63e;</text>
				<text class="list-text">查询课题/征文状态</text>
				<text class="navigat-arrow">&#xe60a;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom" @click="tohistory">
				<text class="list-icon">&#xe64e;</text>
				<text class="list-text">浏览历史</text>
				<text class="navigat-arrow">&#xe60a;</text>
			</view>
			<view class="center-list-item" @click="tocollect">
				<text class="list-icon">&#xe71f;</text>
				<text class="list-text">文章收藏</text>
				<text class="navigat-arrow">&#xe60a;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom" @click="tofontsize">
				<text class="list-icon">&#xe735;</text>
				<text class="list-text">设置字体大小</text>
				<text class="navigat-arrow">&#xe60a;</text>
			</view>
		</view>
		<view class="wx" v-if="!avatarUrl">
			<view class="info-img">
				<button open-type="getUserInfo" @getuserinfo="bindGetUserInfo">	</button>
				<image class="wximg" src="../../static/weixin.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {common} from '@/common/publish.js';
	import {mapState,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				login: false,
				noavatarUrl: '/static/logo.png',
				version: '',
				uerInfo:{},
				hasweichat:true
			}
		},
		onLoad() {
			var that = this;			
			this.getver();
		},
		onShow() {
			this.hasweichat = this.panduan('weixin')
		},
		methods: {
			panduan(id){
				if (plus.os.name== 'iOS') {
					switch (id) {
						case "weixin":
							var WXApi = plus.ios.importClass("WXApi");
							return WXApi.isWXAppInstalled()
						default:
							break;
					}
				}else{
					return true;
				}
			},
			getver() {
				var that = this;
				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
					that.version = inf.version;
				});
			},
			tomeetingorder() {
				if(uni.getStorageSync('avatarUrl')){
					uni.navigateTo({
						url: '/pages/meetingorder/meetingorder'
					});
				}else{
					uni.showToast({
						title: '此模块需要登陆才能访问',
						icon:'none',
						duration: 1500
					});
				}	
			},
			tocollect() {
				if(uni.getStorageSync('islogin')){
					uni.navigateTo({
						url: '/pages/collect/collect'
					});
				}else{
					uni.showToast({
						title: '此模块需要登陆才能访问',
						icon:'none',
						duration: 1500
					});
				}
			},
			toketi(){
				uni.navigateTo({
					url:'/pages/query/query'
				})
			},
			tofontsize() {
				uni.navigateTo({
					url: '/pages/fontsize/fontsize'
				});
			},
			tohistory(){
				uni.navigateTo({
					url: '/pages/history/history'
				});
			},
			tophone(){
				uni.navigateTo({
					url: '/pages/phone/phone'
				});
			},
			bindGetUserInfo(e){
				 common.bindGetUserInfo.call(this,e)
			},
			toupdata(){
				
				common.toupdata(this,true)
				uni.setStorage({
					key: 'uerchoose',
					data:false
				});
			}
		},
		computed:{
			...mapState(['islogin','avatarUrl','nickName'])
		}
	}
</script>

<style lang="scss">
	@import "@/common/publish.scss";

	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('../../static/font/iconfont.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: $bgcolor;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: $fontblue;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: $fontblue;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}

	.lastnav {
		margin-right: 40upx;
	}

	.wx {
		text-align: center;
		margin-top: 80upx;
		margin-bottom:40upx;
		position: relative;
	}
	.info-img{
		width: 110upx;
		height: 110upx;
		margin: 0 auto;
		position: relative;
		button{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			z-index: 999;
		}
	}
	.wximg {
		width: 110upx;
		height: 110upx;
		
		position: absolute;
		left: 0;
		top: 0;
		z-index: 500;
	}

	.layout {
		text-align: center;
	}
</style>
